/*
 * @Description: 日期选择多选修改
 * @version: V1.0.0
 * @Author: Shuangshuang Song
 * @Date: 2020-08-20 14:10:26
 * @LastEditTime: 2020-10-27 13:39:54
 * @LastEditors: Shuangshuang Song
 */
import color from '../../internal/mixins/color';

export default {
  mixins: [color],
  props: {
    type: String,
    dateTimeFormat: Object,
    monthDaySelected: {
      type: Boolean,
      default: true,
    },
    displayDate: Date,
  },
  data() {
    return {
      displayDates: Ext.isArray(this.displayDate) ? this.displayDate : [this.displayDate],
      slideType: 'next',
    };
  },
  methods: {
    replaceSelected(date) {
      const oldDate = this.displayDates[this.displayDates.length - 1];
      if (Ext.isArray(date)) {
        this.slideType = date[date.length - 1].getTime() > oldDate.getTime() ? 'next' : 'prev';
        this.displayDates = date;
      } else {
        this.displayDates.push(date);
        this.displayDates.splice(0, 1);
      }
    },
    createYearSlide(h) {
      // 只取最后选中的那个 防止创建多个展示日期元素而重叠一起
      const lastChoosed = [this.displayDates[this.displayDates.length - 1]];
      return lastChoosed.map((displayDate, index) => {
        const fullYear = displayDate.getFullYear();
        return h('transition', {
          props: {
            name: `mu-date-display-${this.slideType}`,
          },
          key: index,
        }, [
          h('div', {
            staticClass: 'mu-date-display-slideIn-wrapper',
            key: fullYear,
          }, [
            h('div', { staticClass: 'mu-date-display-year-title' }, fullYear),
          ]),
        ]);
      });
    },
    createMonthSlide(h) {
      // 只取最后选中的那个 防止创建多个展示日期元素而重叠一起
      const lastChoosed = [this.displayDates[this.displayDates.length - 1]];
      return lastChoosed.map((displayDate, index) => {
        const displayMonthDay = this.type === 'date' ? this.dateTimeFormat.formatDisplay(displayDate) : this.dateTimeFormat.getMonthList()[displayDate.getMonth()];
        return h('transition', {
          props: {
            name: `mu-date-display-${this.slideType}`,
          },
          key: index,
        }, [
          h('div', {
            staticClass: 'mu-date-display-slideIn-wrapper',
            key: displayMonthDay,
          }, [
            h('div', { staticClass: 'mu-date-display-monthday-title' }, displayMonthDay),
          ]),
        ]);
      });
    },
  },
  render(h) {
    const displayYear = h('div', {
      staticClass: 'mu-date-display-year',
      on: {
        click: () => this.$emit('changeView', 'year'),
      },
    }, this.createYearSlide(h));
    const displayMonthDay = this.type !== 'year' ? h('div', {
      staticClass: 'mu-date-display-monthday',
      on: {
        click: () => this.$emit('changeView', this.type === 'date' ? 'monthDay' : 'month'),
      },
    }, this.createMonthSlide(h)) : undefined;

    return h('div', {
      staticClass: `mu-picker-display mu-date-display ${this.getColorClass(false)}`,
      style: {
        'background-color': this.getColor(this.color),
      },
      class: {
        'selected-year': !this.monthDaySelected,
      },
    }, [displayYear, displayMonthDay]);
  },
  watch: {
    displayDate(val) {
      this.replaceSelected(val);
    },
  },
};
